<script setup lang="ts">
import { ref, onMounted, type Component } from 'vue'
import { useUserStore } from '@/stores/user'
import type { MenuVO } from '@/api-client/src/api-client/models/menuVO'
import { getMenuController } from '@/api-client/index'
import { useRouter } from 'vue-router'
// 引入所有需要的图标
import {
  Grid,
  Money,
  Location,
  ChatLineSquare,
  Tools,
  WindPower,
  OfficeBuilding,
  House,
  User,
  Van,
  Odometer,
  DataBoard,
  Setting,
  UserFilled,
  Avatar,
  Menu as IconMenu,
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const router = useRouter()
const userStore = useUserStore()

const menuList = ref<MenuVO[]>([])

const handleSelect = (index: string) => {
  if (index && index.startsWith('/')) {
    router.push(index)
  }
  if (index === '3') {
    router.push('/statistical-analysis')
  }
}

const handleOwnerSelect = (index: string) => {
  console.log(index)
}

onMounted(async () => {
  if (userStore.loginUser?.userName) {
    try {
      const { listMenu } = getMenuController()
      const response = await listMenu(userStore.loginUser.userName)
      if (response.code === 200 && response.data) {
        menuList.value = response.data
      } else {
        console.error('获取菜单失败:', response.message)
      }
    } catch (error) {
      console.error('获取菜单时发生错误:', error)
    }
  }
})

const icons: Record<string, Component> = {
  Grid,
  Money,
  Location,
  ChatLineSquare,
  Tools,
  WindPower,
  OfficeBuilding,
  House,
  User,
  Van,
  Odometer,
  DataBoard,
  Setting,
  UserFilled,
  Avatar,
  Menu: IconMenu,
}

const resolveIcon = (name?: string): Component => {
  if (!name) return IconMenu
  return icons[name] ?? IconMenu
}
</script>

<template>
  <div class="aside-view">
    <div class="logo-container">
      <img src="@/assets/logo.svg" alt="Logo" class="logo-img" />
      <h1 v-if="!isCollapse" class="logo-title">Community</h1>
    </div>
    <el-menu
      default-active="/"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
      v-if="userStore.loginUser?.type === 1"
    >
      <template v-for="item in menuList" :key="item.id">
        <el-sub-menu
          v-if="item.children && item.children.length > 0"
          :index="item.route || String(item.id)"
        >
          <template #title>
            <el-icon>
              <component :is="resolveIcon(item.icon)" />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="child in item.children"
            :key="child.id"
            :index="child.route || String(child.id)"
          >
            <el-icon>
              <component :is="resolveIcon(child.icon)" />
            </el-icon>
            <template #title>{{ child.name }}</template>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else :index="item.route || String(item.id)">
          <el-icon>
            <component :is="resolveIcon(item.icon)" />
          </el-icon>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </template>
    </el-menu>

    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleOwnerSelect"
      v-if="userStore.loginUser?.type === 2"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <component :is="resolveIcon('user')" />
          </el-icon>
          <span>基本信息</span>
        </template>
        <el-menu-item index="1-1">个人信息管理</el-menu-item>
        <el-menu-item index="1-2">住房信息管理</el-menu-item>
        <el-menu-item index="1-3">缴费管理</el-menu-item>
        <el-menu-item index="1-4">停车位管理</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title>
          <el-icon>
            <component :is="resolveIcon('setting')" />
          </el-icon>
          <span>社区相关</span>
        </template>
        <el-menu-item index="2-1">社区投诉管理</el-menu-item>
        <el-menu-item index="2-2">社区报修管理</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style lang="css" scoped>
.aside-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  height: 60px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.logo-img {
  height: 32px;
  width: 32px;
}

.logo-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 0 12px;
  white-space: nowrap;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu {
  flex-grow: 1;
  border-right: none;
  overflow-y: auto;
}
</style>
